<template>
	<view class="nc-signin-content">
		<view class="signin-top ns-bg-color">
			<text :class="isSign ? 'active-text' : 'signin-text'" @click="sign()">{{ signName }}</text>
		</view>
		<view class="signin-content">
			<view class="date">{{ dateYear }}年{{ dateMonth }}月</view>
			<view class="week">
				<text class="ns-text-color-gray">日</text>
				<text class="ns-text-color-gray">一</text>
				<text class="ns-text-color-gray">二</text>
				<text class="ns-text-color-gray">三</text>
				<text class="ns-text-color-gray">四</text>
				<text class="ns-text-color-gray">五</text>
				<text class="ns-text-color-gray">六</text>
			</view>
			<view class="aggregate-date">
				<text class="date-box" v-for="(value, index) in dateWeek" :key="index"></text>
				<block v-for="(value, index) in dateArr" :key="index">
					<view v-if="value.selected > 0" class="date-box">
						<text class="date-icon iconyuan_checked iconfont ns-text-color"></text>
						<text class="date-text">已签到</text>
					</view>
					<view v-else-if="currentDate == value.day" class="date-box">
						<text class="date-text sign ns-bg-color">{{ value.day }}</text>
					</view>
					<view v-else class="date-box">
						<text class="date-text">{{ value.day }}</text>
					</view>
				</block>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			isSign: '',
			dateYear: 0, //年
			dateMonth: 0, //月
			currentTime: 0,
			dateWeek: '', //星期
			dateArr: [],
			currentDate: '', // 当前日期
			signName: '签到'
		};
	},
	mixins: [http],
	onLoad() {
		/* 初始化签到情况 */
		this.initSignin();
		/* 获取日期 */
		this.getCurrentTime();
	},
	methods: {
		initSignin() {
			this.sendRequest({
				url: 'NsMemberSign.MemberSign.isSignIn',
				success: res => {
					this.isSign = res.data;
					if (this.isSign) this.signName = '已签到';
				}
			});
		},
		/* 获取当前日期 */

		getCurrentTime() {
			this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				success: res => {
					this.currentTime = res.data;
					let myDate = new Date(this.currentTime);

					this.dateYear = myDate.getFullYear();
					this.dateMonth = myDate.getMonth() + 1;

					let weekArray = new Array(0, 1, 2, 3, 4, 5, 6),
						currentDate = this.dateYear + '-' + this.dateMonth + '-' + '01';
					/* 获取当前日期 */
					this.currentDate = myDate.getDate();

					//获取当前星期
					this.dateWeek = weekArray[new Date(currentDate).getDay()];
				}
			});
			/* 获取具体日期 */
			this.sendRequest({
				url: 'NsMemberSign.MemberSign.signInRecordsForApp',
				success: res => {
					this.dateArr = res.data;
					if (this.$refs.loadingCover == undefined) return;
					this.$refs.loadingCover.hide();
				}
			});
		},
		/* 点击签到 */
		sign() {
			this.sendRequest({
				url: 'NsMemberSign.MemberSign.signIn',
				success: res => {
					if (res.data > 0) {
						this.isSign = res.data;
						this.signName = '已签到';
						this.$util.showToast({
							title: '签到成功'
						});
						/* 初始化签到情况 */
						this.initSignin();
						/* 获取日期 */
						this.getCurrentTime();
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.signin-top {
	width: 100%;
	height: 500rpx;
	text-align: center;
	padding-top: 40rpx;

	text {
		display: block;
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
		border-radius: 50%;
		font-size: $ns-font-size-lg + 12rpx;
		font-weight: 600;
		line-height: 200rpx;
		letter-spacing: 2rpx;
		border: 12rpx solid #fff;
	}
	.active-text {
		color: $ns-text-color-gray;
		background: #ffffff;
	}
	.signin-text {
		color: #ffffff;
	}
}
.signin-content {
	width: 92%;
	margin: -250rpx auto 0;
	background: #fff;
	border-radius: 10rpx;
	padding: 30rpx 0;
	text-align: center;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
	.date {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	.week {
		width: 92%;
		margin: 30rpx auto 0;
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		text {
			width: 14.25%;
		}
	}
}
.aggregate-date {
	display: flex;
	flex-wrap: wrap;
	padding: 0 10rpx;
	.date-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		height: 60rpx;
		width: 94rpx;
		line-height: 1.3;
		font-size: $ns-font-size-base;
		color: $ns-text-color-gray;
	}
	.date-text.sign {
		padding: 4rpx;
		color: #fff;
		border-radius: 50%;
		line-height: 40rpx;
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
